<template>
	<cl-page>
		<view class="help-center">
			<!-- 搜索�?-->
			<view class="search-section">
				<cl-search
					v-model="searchKeyword"
					placeholder="搜索帮助内容"
					@search="onSearch"
					@input="onSearchInput"
				/>
			</view>

			<!-- 快捷服务 -->
			<view class="quick-services">
				<view class="service-title">
					<cl-icon name="headset" size="20" color="#667eea"></cl-icon>
					<text class="title-text">快捷服务</text>
				</view>
				<view class="service-grid">
					<view
						class="service-item"
						v-for="service in quickServices"
						:key="service.id"
						@tap="handleServiceClick(service)"
					>
						<view class="service-icon">
							<cl-icon
								:name="service.icon"
								size="24"
								:color="service.color"
							></cl-icon>
						</view>
						<text class="service-name">{{ service.name }}</text>
					</view>
				</view>
			</view>

			<!-- 常见问题 -->
			<view class="faq-section">
				<view class="section-header">
					<text class="section-title">常见问题</text>
					<text class="more-btn" @tap="toFaqList">查看全部</text>
				</view>

				<view class="faq-list">
					<view
						class="faq-item"
						v-for="item in faqList"
						:key="item.id"
						@tap="toggleFaq(item)"
					>
						<view class="faq-question">
							<text class="question-text">{{ item.question }}</text>
							<view class="question-icon" :class="{ expanded: item.expanded }">
								<cl-icon name="arrow-down" size="16" color="#666"></cl-icon>
							</view>
						</view>
						<view class="faq-answer" v-if="item.expanded">
							<text class="answer-text">{{ item.answer }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 联系方式 -->
			<view class="contact-section">
				<view class="section-header">
					<text class="section-title">联系我们</text>
				</view>

				<view class="contact-list">
					<view
						class="contact-item"
						v-for="contact in contactList"
						:key="contact.type"
						@tap="handleContact(contact)"
					>
						<view class="contact-icon">
							<cl-icon :name="contact.icon" size="20" color="#667eea"></cl-icon>
						</view>
						<view class="contact-info">
							<text class="contact-label">{{ contact.label }}</text>
							<text class="contact-value">{{ contact.value }}</text>
						</view>
						<view class="contact-arrow">
							<cl-icon name="arrow-right" size="16" color="#ccc"></cl-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- 意见反馈 -->
			<view class="feedback-section">
				<view class="feedback-btn" @tap="showFeedback = true">
					<cl-icon name="message-square" size="20" color="#ffffff"></cl-icon>
					<text class="feedback-text">意见反馈</text>
				</view>
			</view>

			<!-- 反馈弹窗 -->
			<cl-popup v-model="showFeedback" direction="bottom" :height="600">
				<view class="feedback-modal">
					<view class="modal-header">
						<text class="modal-title">意见反馈</text>
						<cl-icon
							name="close"
							size="20"
							color="#666"
							@tap="showFeedback = false"
						></cl-icon>
					</view>

					<view class="modal-content">
						<view class="feedback-types">
							<text class="types-label">反馈类型</text>
							<view class="type-options">
								<view
									class="type-option"
									v-for="type in feedbackTypes"
									:key="type.value"
									:class="{ active: feedbackData.type === type.value }"
									@tap="feedbackData.type = type.value"
								>
									<text class="type-text">{{ type.label }}</text>
								</view>
							</view>
						</view>

						<view class="feedback-content">
							<textarea
								class="feedback-textarea"
								placeholder="请详细描述您遇到的问题或建议..."
								v-model="feedbackData.content"
								maxlength="500"
							></textarea>
							<view class="char-count">
								<text class="count-text"
									>{{ feedbackData.content.length }}/500</text
								>
							</view>
						</view>

						<view class="contact-input">
							<input
								class="contact-field"
								placeholder="联系方式（选填）"
								v-model="feedbackData.contact"
							/>
						</view>

						<view class="modal-actions">
							<view class="submit-btn" @tap="submitFeedback">
								<text class="btn-text">提交反馈</text>
							</view>
						</view>
					</view>
				</view>
			</cl-popup>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useCool } from "/@/cool";

const { service, router } = useCool();

// 页面数据
const searchKeyword = ref("");
const showFeedback = ref(false);
const faqList = ref<any[]>([]);

// 快捷服务
const quickServices = [
	{ id: 1, name: "在线客服", icon: "message-circle", color: "#52c41a", action: "chat" },
	{ id: 2, name: "电话客服", icon: "phone", color: "#1890ff", action: "call" },
	{ id: 3, name: "使用教程", icon: "play-circle", color: "#722ed1", action: "tutorial" },
	{ id: 4, name: "账户问题", icon: "user", color: "#fa8c16", action: "account" },
	{ id: 5, name: "订单问题", icon: "shopping-bag", color: "#eb2f96", action: "order" },
	{ id: 6, name: "支付问题", icon: "credit-card", color: "#13c2c2", action: "payment" },
];

// 联系方式
const contactList = [
	{ type: "phone", label: "客服热线", value: "400-123-4567", icon: "phone" },
	{ type: "email", label: "邮箱客服", value: "service@example.com", icon: "mail" },
	{ type: "qq", label: "QQ客服", value: "123456789", icon: "message-square" },
	{ type: "wechat", label: "微信客服", value: "扫码添加", icon: "message-circle" },
];

// 反馈数据
const feedbackData = reactive({
	type: "",
	content: "",
	contact: "",
});

// 反馈类型
const feedbackTypes = [
	{ label: "功能建议", value: "suggestion" },
	{ label: "使用问题", value: "usage" },
	{ label: "Bug反馈", value: "bug" },
	{ label: "其他", value: "other" },
];

// 搜索防抖定时�?let searchTimer: NodeJS.Timeout | null = null;

// 搜索输入
function onSearchInput(searchTimer: any) {
	if (searchTimer) {
		clearTimeout(searchTimer);
	}

	searchTimer = setTimeout(() => {
		// 实际搜索逻辑
		performSearch();
	}, 300);
}

// 执行搜索
function performSearch() {
	if (!searchKeyword.value.trim()) return;

	// 这里可以调用搜索API
	console.log("搜索:", searchKeyword.value);
}

// 搜索事件
function onSearch() {
	performSearch();
}

// 处理服务点击
function handleServiceClick(service: any) {
	switch (service.action) {
		case "chat":
			router.push("/uni_modules/cool-cs/pages/chat");
			break;
		case "call":
			uni.makePhoneCall({ phoneNumber: "4001234567" });
			break;
		case "tutorial":
			router.push("/pages/user/tutorial");
			break;
		case "account":
		case "order":
		case "payment":
			router.push(`/pages/user/help-detail?type=${service.action}`);
			break;
		default:
			uni.showToast({ title: "功能开发中", icon: "none" });
	}
}

// 切换FAQ展开状态
function toggleFaq(item: any) {
	item.expanded = !item.expanded;
}

// 查看全部FAQ
function toFaqList() {
	router.push("/pages/user/faq-list");
}

// 处理联系方式点击
function handleContact(contact: any) {
	switch (contact.type) {
		case "phone":
			uni.makePhoneCall({ phoneNumber: contact.value });
			break;
		case "email":
			// #ifdef H5
			window.location.href = `mailto:${contact.value}`;
			// #endif
			// #ifndef H5
			uni.setClipboardData({
				data: contact.value,
				success: () => {
					uni.showToast({ title: "邮箱已复制", icon: "success" });
				},
			});
			// #endif
			break;
		case "qq":
		case "wechat":
			uni.setClipboardData({
				data: contact.value,
				success: () => {
					uni.showToast({ title: "已复制到剪贴板", icon: "success" });
				},
			});
			break;
	}
}

// 提交反馈
async function submitFeedback() {
	if (!feedbackData.type) {
		uni.showToast({ title: "请选择反馈类型", icon: "none" });
		return;
	}

	if (!feedbackData.content.trim()) {
		uni.showToast({ title: "请输入反馈内容", icon: "none" });
		return;
	}
}
</script>

<style lang="scss" scoped>
.help-center {
	background-color: #f8f9fa;
	min-height: 100vh;
}

.search-section {
	padding: 16rpx 24rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #eee;
}

.quick-services {
	background-color: #ffffff;
	margin: 16rpx;
	border-radius: 16rpx;
	padding: 24rpx;
}

.service-title {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24rpx;
}

.service-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	padding: 20rpx;
	border-radius: 12rpx;
	transition: all 0.3s ease;

	&:active {
		background-color: #f8f9ff;
		transform: scale(0.95);
	}
}

.service-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background-color: #f8f9ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-name {
	font-size: 22rpx;
	color: #666;
	text-align: center;
}

.faq-section,
.contact-section {
	background-color: #ffffff;
	margin: 16rpx;
	border-radius: 16rpx;
	overflow: hidden;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.section-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1a1a;
}

.more-btn {
	font-size: 24rpx;
	color: #667eea;
}

.faq-list {
	padding: 0 24rpx;
}

.faq-item {
	border-bottom: 1rpx solid #f5f5f5;

	&:last-child {
		border-bottom: none;
	}
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	cursor: pointer;
}

.question-text {
	font-size: 26rpx;
	color: #1a1a1a;
	flex: 1;
	line-height: 1.5;
}

.question-icon {
	margin-left: 16rpx;
	transition: transform 0.3s ease;

	&.expanded {
		transform: rotate(180deg);
	}
}

.faq-answer {
	padding-bottom: 24rpx;
	animation: fadeIn 0.3s ease;
}

.answer-text {
	font-size: 24rpx;
	color: #666;
	line-height: 1.6;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-list {
	padding: 0 24rpx;
}

.contact-item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background-color: #f8f9ff;
	}
}

.contact-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	background-color: #f8f9ff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
}

.contact-info {
	flex: 1;
}

.contact-label {
	font-size: 26rpx;
	color: #1a1a1a;
	line-height: 1.4;
	margin-bottom: 4rpx;
	display: block;
}

.contact-value {
	font-size: 22rpx;
	color: #666;
	line-height: 1.4;
	display: block;
}

.contact-arrow {
	margin-left: 16rpx;
}

.feedback-section {
	padding: 24rpx;
}

.feedback-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
	height: 88rpx;
	border-radius: 44rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
	}
}

.feedback-text {
	font-size: 28rpx;
	font-weight: 600;
	color: #ffffff;
}

.feedback-modal {
	background-color: #ffffff;
	border-radius: 24rpx 24rpx 0 0;
	height: 100%;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 24rpx 16rpx;
	border-bottom: 1rpx solid #eee;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
}

.modal-content {
	padding: 24rpx;
	height: calc(100% - 120rpx);
	display: flex;
	flex-direction: column;
}

.feedback-types {
	margin-bottom: 24rpx;
}

.types-label {
	font-size: 26rpx;
	color: #1a1a1a;
	margin-bottom: 16rpx;
	display: block;
}

.type-options {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.type-option {
	padding: 16rpx 24rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 40rpx;
	transition: all 0.3s ease;

	&.active {
		border-color: #667eea;
		background-color: #f8f9ff;
	}

	&:active {
		transform: scale(0.95);
	}
}

.type-text {
	font-size: 24rpx;
	color: #666;

	.type-option.active & {
		color: #667eea;
		font-weight: 500;
	}
}

.feedback-content {
	flex: 1;
	margin-bottom: 24rpx;
}

.feedback-textarea {
	width: 100%;
	height: 240rpx;
	padding: 16rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	font-size: 26rpx;
	line-height: 1.5;
	resize: none;

	&:focus {
		border-color: #667eea;
	}
}

.char-count {
	text-align: right;
	margin-top: 8rpx;
}

.count-text {
	font-size: 20rpx;
	color: #999;
}

.contact-input {
	margin-bottom: 32rpx;
}

.contact-field {
	width: 100%;
	height: 80rpx;
	padding: 0 16rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	font-size: 26rpx;

	&:focus {
		border-color: #667eea;
	}
}

.modal-actions {
	margin-top: auto;
}

.submit-btn {
	width: 100%;
	height: 80rpx;
	border-radius: 40rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
	}
}

.btn-text {
	font-size: 28rpx;
	font-weight: 600;
	color: #ffffff;
}
</style>
